<template>
  <!--
    折线实体组件
    - 接收路径坐标等参数，内部将实体添加到父级提供的 viewer.entities 中
    - 组件卸载时，自动移除实体，确保资源释放
  -->
  <div style="display: none"></div>
</template>

<script setup>
// 中文注释：折线实体组件
// - 职责：接收经纬高数组与样式，向 viewer.entities 添加 polyline，卸载时移除
// - 用法：在 CesiumViewer 的 #entities 插槽中使用，传入 positions 等 props
import { inject, onBeforeUnmount, onMounted, watch, ref } from "vue";
import * as Cesium from "cesium";

// 常量：与 CesiumViewer 中的 provide key 保持一致
const CESIUM_VIEWER_KEY = "cesiumViewer";

// props 设计：
// - positions：经纬高数组（示例：[{lon: 116.39, lat: 39.9, height: 0}, ...]）
// - width：线宽（像素）
// - material：线材质（支持 CSS 色值字符串或对象描述，如 {type:'dash',color:'#0ff'}）
// - clampToGround：是否贴地
// - show：是否显示
const props = defineProps({
  positions: {
    type: Array,
    default: () => [],
    required: true,
  },
  width: {
    type: Number,
    default: 3,
  },
  material: {
    type: [String, Object],
    default: "#00E5FF",
  },
  clampToGround: {
    type: Boolean,
    default: false,
  },
  show: {
    type: Boolean,
    default: true,
  },
});

// 注入 viewer
// 变量：注入的 viewer 引用（ref）
const injectedViewerRef = inject(CESIUM_VIEWER_KEY, null);
// 变量：当前组件创建的实体引用
const entityRef = ref(null);

onMounted(() => {
  if (!injectedViewerRef) return;
  // 等待父组件创建 viewer 后再进行实体创建
  const viewer = injectedViewerRef.value;
  if (!viewer) {
    const stop = watch(
      () => injectedViewerRef.value,
      (v) => {
        if (v) {
          createOrUpdateEntity();
          stop();
        }
      }
    );
  } else {
    createOrUpdateEntity();
  }
});

onBeforeUnmount(() => {
  const viewer = injectedViewerRef && injectedViewerRef.value;
  if (viewer && entityRef.value) {
    viewer.entities.remove(entityRef.value);
    entityRef.value = null;
  }
});

// 监听 props，动态更新
watch(
  () => ({ ...props }),
  () => {
    const viewer = injectedViewerRef && injectedViewerRef.value;
    if (!viewer) return;
    createOrUpdateEntity();
  },
  { deep: true }
);

// 方法：创建或更新折线实体
function createOrUpdateEntity() {
  const viewer = injectedViewerRef && injectedViewerRef.value;
  if (!viewer) return;
  const positionsDegrees = [];
  props.positions.forEach((p) => {
    positionsDegrees.push(p.lon, p.lat, p.height ?? 0);
  });

  // 材质处理
  let material = Cesium.Color.fromCssColorString("#00E5FF");
  if (typeof props.material === "string") {
    material = Cesium.Color.fromCssColorString(props.material);
  } else if (props.material && props.material.type === "dash") {
    // 简易示例：虚线材质
    material = new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.fromCssColorString(props.material.color || "#00E5FF"),
      dashLength: props.material.dashLength || 16,
      dashPattern: props.material.dashPattern || 255,
    });
  }

  const polylineOptions = {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights(positionsDegrees),
    width: props.width,
    material: material,
    clampToGround: props.clampToGround,
  };

  if (entityRef.value) {
    // 更新已存在的实体
    entityRef.value.polyline.positions = polylineOptions.positions;
    entityRef.value.polyline.width = new Cesium.ConstantProperty(props.width);
    entityRef.value.polyline.material = polylineOptions.material;
    entityRef.value.show = props.show;
  } else {
    // 创建新实体
    entityRef.value = viewer.entities.add({
      show: props.show,
      polyline: polylineOptions,
    });
  }
}

// 向外暴露实体 id（如需要进行选择或样式外部更新时）
defineExpose({
  getEntity: () => entityRef.value,
});
</script>

<style scoped>
</style>


